<template>
    <div>
        <!--搜索-->
        <div id="searchData">
            <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                <el-form-item>
                    <el-input v-model="searchForm.name" placeholder="——请输入商品名称——"
                              class="center-text"></el-input>
                </el-form-item>
                <el-form-item :span="5">
                    <el-select
                            v-model="searchForm.isExamine"
                            placeholder="请选择"
                    >
                        <el-option
                                v-for="item in IsExamineoptions"
                                :label="item.label"
                                :value="item.value"
                                :key="item.label"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="success" @click="search" icon="el-icon-search">搜索</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="refresh" icon="el-icon-refresh">刷新</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- table -->
        <el-table
                :data="tableData"
                style="width: 100%"

        >
            <!-- 序号 -->
            <el-table-column
                    type="index"
                    :index="indexMethod"
                    fixed
            >
            </el-table-column>
            <el-table-column
                    prop="store.storeName"
                    label="门店名称"
                    width="120"
                    fixed
            >
            </el-table-column>
            <el-table-column
                    prop="productType.name" label="商品类型"
                    width="120"
                    fixedstore4
            >
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="商品名称"
                    width="120"
                    fixed
            >
            </el-table-column>
            <el-table-column
                    prop="picture"
                    label="图片路径"
                    width="120"
            >
                <template slot-scope="scope">
                    <el-image
                            style="width: 60px; height: 40px"
                            :src="scope.row.picture"
                    ></el-image>
                </template>
            </el-table-column>
            <!--            <el-table-column-->
            <!--                    prop="imageList"-->
            <!--                    label="商品首页轮播图片"-->
            <!--                    width="300"-->
            <!--            >-->
            <!--                <template slot-scope="scope">-->
            <!--                    <div-->
            <!--                            class="block"-->
            <!--                            style="width: 233px;height: 117px;margin: 0px 20px 6px 20px;"-->
            <!--                    >-->
            <!--                        <el-carousel height="150px">-->
            <!--                            <el-carousel-item-->
            <!--                                    v-for="image in scope.row.imageList"-->
            <!--                                    :key="image.id"-->
            <!--                            >-->
            <!--                                <el-image :src="image.imageurl">-->
            <!--                                </el-image>-->
            <!--                            </el-carousel-item>-->
            <!--                        </el-carousel>-->
            <!--                    </div>-->
            <!--                </template>-->
            <!--            </el-table-column>-->
            <el-table-column
                    prop="loadPrice"
                    label="现价(元)"
                    width="120"
            >
            </el-table-column>
            <el-table-column
                    prop="loadPrice"
                    label="原价(元)"
                    width="120"
            >
            </el-table-column>
            <el-table-column
                    prop="freight"
                    label="运费(元)"
                    width="120"
            >
            </el-table-column>
            <el-table-column
                    prop="isline"
                    label="是否上线"
                    width="100"
                    :formatter="isline"
            >
            </el-table-column>
            <el-table-column
                    prop="productDetails"
                    label="商品详情"
                    width="150"
                    :show-overflow-tooltip="true"
            >
                <template slot-scope="scope">
                    <el-button
                            type="text"
                            @click="ondialogDetails(scope.row)"
                    >点击查看
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column
                    prop="prompt"
                    label="温馨提示"
                    width="150"
            >
            </el-table-column>
            <el-table-column
                    prop="isExamine"
                    label="审核状态"
                    width="150"
                    :formatter="isExamine"
            >
            </el-table-column>

            <el-table-column
                    prop="userName"
                    label="审核人"
                    width="120"
                    :formatter="userFormatter"
            >
            </el-table-column>
            <el-table-column
                    prop="examineOpinion"
                    label="审核意见"
                    width="150"
            >
            </el-table-column>
            <el-table-column
                    prop="examineTime"
                    label="审核时间"
                    width="180"
            >
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="120"
                    fixed="right">
                <template slot-scope="scope">
                    <el-button
                            v-if="scope.row.isExamine === '0'"
                            size="mini"
                            type="primary"
                            @click="handleEdit(scope.$index, scope.row)"
                    >审核
                    </el-button> &nbsp;&nbsp;
                    <el-button
                            v-if="scope.row.isExamine === '1'||scope.row.isExamine === '2'"
                            size="mini"
                            type="info"
                            disabled
                    >已审核
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 显示商品详情的对话框 -->
        <el-dialog
                title="商品详情"
                :visible.sync="dialogDetailsVisible"
        >
            <div
                    v-html="productDetails"
                    class="productDetailsBox"
            >
            </div>
        </el-dialog>

        <!--分页功能-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="searchForm.currentPage"
                :page-sizes="[1,2,5,10]"
                :page-size="searchForm.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
        <!-- 审核操作 -->
        <el-dialog
                :title="title"
                :visible.sync="dialogFormVisible"
        >
            <el-form
                    :model="form"
                    ref="form"
            >
                <el-form-item
                        label="是否通过审核"
                        :label-width="formLabelWidth"
                >
                    <el-select
                            v-model="form.isExamine"
                            placeholder="请选择"
                    >
                        <el-option
                                v-for="item in options"
                                :label="item.label"
                                :value="item.value"
                                :key="item.label"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item
                        label="审核意见"
                        :label-width="formLabelWidth"
                >
                    <el-input
                            v-model="form.examineOpinion"
                            autocomplete="off"
                    ></el-input>
                </el-form-item>

            </el-form>
            <div
                    slot="footer"
                    class="dialog-footer"
            >
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button
                        type="primary"
                        @click="addOrUpdate"
                >确 定
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "ProductExamine",
        data() {
            return {
              productDetails: '',
                searchForm: {
                    currentPage: 1, //当前页数
                    pageSize: 5,//每页的数量
                    //用来接收前端后端查出来的数据
                    name: "",
                    isExamine: '',
                },
                total: 0, //总options条数
                tableData: [],
                //加载更新人（不能用undefined）报错；
                UserOptions: [],
                optionsProduct: [],
                dialogFormVisible: false,
                formLabelWidth: "120px",
                dialogDetailsVisible: false, //商品详情是否显示
                rules: {
                    isExamine: [{required: true, message: '审核不能为空', trigger: 'change'}],
                    examineOpinion: [{required: true, message: '审核意见不能为空', trigger: 'change'}],
                },

                //IsExamineoptions:[],
                imageUrl: "", //头像路径
                title: "审核",
                //审核弹窗信息
                form: {},
                options: [
                    {
                        value: 1,
                        label: "审核通过",
                    },
                    {
                        value: 2,
                        label: "审核不通过",
                    },
                ],
                IsExamineoptions: [
                    {
                        label: "全部",
                    },
                    {
                        value: 0,
                        label: "未审核",
                    },
                    {
                        value: 1,
                        label: "已通过",
                    },
                    {
                        value: 2,
                        label: "未通过",
                    },
                ],
                //上传图片访问路径
                uploadAction: this.$http.getUri() + "/product/list/uploadFile",
            }
        },
        created() {
            this.selectData();
            this.loadUpdateBy();
        },
        methods: {
            //审核
            addOrUpdate() {
                //定义变量_this=this
                var _this = this;
                //console.log("this.form", this.form);
                //axios向后台发请求
                this.$http.post("/product/examine/updateExamine", this.form) //请求参数  json格式
                    .then(function (response) {
                        //console.log("response~~~~```", response);
                        //response获取后台数据时，一定加data  response.data相当于从响应的body中获取
                        if (response.data.code === 200) {
                            //提示成功
                            _this.$message({
                                message: "恭喜你，这是一条成功消息",
                                type: "success",
                            });
                            //关闭弹框
                            _this.dialogFormVisible = false;
                            //重新加载数据
                            _this.selectData();
                            _this.form.isExamine = '';
                            _this.form.examineOpinion = '';
                        } else {
                            // _this.$message.error("错了哦，这是一条错误消息");
                        }
                    })
                    .catch(function (error) {
                        //异常处理
                        // console.log(error);
                    });
            },
            //审核跳转
            handleEdit(index, row) {
                // console.log(index, row);
                //让对话框显示
                this.dialogFormVisible = true;
                //让title值也发生变化
                this.title = "审核";
                //给表单赋值
                this.form.productExamineId = row.productExamineId;
                this.form.productId = row.productId;
            },
            //分页查询所有信息
            selectData() {
                console.log("分页查询条件",this.searchForm)
                this.$http.post("/product/examine/select", this.searchForm).then(result => {
                 // console.log("分页查询",result)
                  this.tableData = result.data.data.records;
                    this.total = result.data.data.total;
                })
            },

            //显示商品详情
            ondialogDetails(row) {
                this.dialogDetailsVisible = true;
                if (row.productDetails) {
                    this.productDetails = row.productDetails;
                } else {
                    this.productDetails =
                        "<p style='text-align: center;'>没有更多内容了</p>";
                }
            },
            //获取所有的用户信息,创建人
            loadUpdateBy() {
                this.$http.get("/system/user/selectAll").then(result => {
                    this.UserOptions = result.data.data;
                })
            },
            //从查到的用户信息中查询对应的创建者姓名
            userFormatter(row) {
                for (let i = 0; i < this.UserOptions.length; i++) {
                    if (row.examineId === this.UserOptions[i].userId) {
                        return this.UserOptions[i].userName;
                    }
                }
            },
            //查询商品
            search() {
                this.selectData();
            },

            //图片上传的方法
            handleAvatarSuccess(res, file) {
                this.addEditform.picture = res
            },
            beforeAvatarUpload(file) {
                const isImage = file.type.startsWith('image/');
                const isJPGorPNG = isImage && (file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/webp');
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPGorPNG) {
                    this.$message.error('上传头像图片只能是 JPG或者是PNG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPGorPNG && isLt2M;
            },
            //刷新方法
            refresh() {
                // location.reload();//整个页面刷新
                this.searchForm = {};
                this.searchForm.name = "";
                this.searchForm.isExamine = "";
                this.searchForm.currentPage = 1;
                this.searchForm.pageSize = 5;
                this.selectData();
            },
            //判断是否是历史版本
            isHistory(row) {
                return row.isHistory === 0 ? "是" : "否";
            },
            //是否上线
            isline(row) {
                return row.isline === 0 ? "是" : "否";
            },
            //审核状态
            isExamine(row) {
                if (row.isExamine === 0) {
                    return "未审核";
                } else if (row.isExamine === 1) {
                    return "审核通过";
                } else {
                    return "审核未通过";
                }
            },
            //显示索引
            indexMethod(index) {
                return index + 1;
            },
            //每页数量发生变化
            handleSizeChange(val) {
                this.searchForm.pageSize = val;
                this.selectData();
            },
            //页码发生变化
            handleCurrentChange(val) {
                this.searchForm.currentPage = val;
                this.selectData();
            },

        }
    }
</script>
<style scoped>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409eff;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
    }

    .avatar {
        width: 100px;
        height: 100px;
        display: block;
    }

    .left {
        /* 设置弹出框中输入框的宽度和位置 */
        width: 87%;
        text-align: left;
    }

    /* .el-dialog {
      position: relative;
      margin: 0 auto 50px;
      background: #fff;
      border-radius: 2px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
      box-sizing: border-box;
      width: 30%;
    } */
    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 150px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n + 1) {
        background-color: #d3dce6;
    }

    /* 设置商品详情的样式 */
    .productDetailsBox {
        margin: 20px;
    }
</style>